<template>
	<view class="content">
		<!-- 搜索 -->
		<view style="display: flex;justify-content: space-around;">
			<view style="width: 90%; height: 50rpx;">
				<u-search bgColor="#ffffff" searchIconSize="50" borderColor="#EEEEEE" height="70" :showAction="false"
					placeholder="搜索球场或关键字"></u-search>
			</view>


		</view>

		<!-- 距离 -->
		<view class="u-page__tag-item">
			<view style="width: 150rpx; line-height: 100rpx;" v-for="(item, index) in radios" :key="index">
				<u-tag size="large" :borderColor="item.checked ? '#4A43EC' : '#F3F4F5'"
					:bgColor="item.checked ? '#4A43EC' : '#F3F4F5'" :text="item.range" :plain="!item.checked"
					:name="index" :color="item.checked ? '#ffffff' : '#939394'" @click="radioClick">
				</u-tag>
			</view>

		</view>

		<!-- 球场 -->
		<view @click="toStadiumManage()" v-for="item in 3" class="stadiumBox space-between padding20-40">
			<view class="image-container">
				<u--image radius="20" :showLoading="true" src="https://cdn.uviewui.com/uview/album/1.jpg" width="130px" height="130px" @click="click"></u--image>
			</view>
			<view class="info">
				<view class="space-between">
					<text class="stadium-name">诺坎普球场</text>
					<text class="distance">12.6km</text>
				</view>
				
				<view class="capacity">
					<text class="capacity-item">5人场</text>
					<text class="capacity-item">|</text>
					<text class="capacity-item">7人场</text>
					<text class="capacity-item">|</text>
					<text class="capacity-item">9人场</text>
				</view>
				<text class="distance">广东省广州市黄埔区联合街道诺坎普大球场</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radios: [{
						checked: true,
						range: '不限'
					},
					{
						checked: false,
						range: '5公里'
					},
					{
						checked: false,
						range: '10公里'
					},
					{
						checked: false,
						range: '20公里'
					}
				],
			}
		},
		methods: {
			radioClick(name) {
				this.radios.map((item, index) => {
					item.checked = index === name ? true : false
				})
			},
			
			// 跳转到球场管理
			toStadiumManage(){
				uni.navigateTo({
					url:"/pages/stadium/stadiumManage"
				})
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100vh;
		background-color: #f9f9f9;
	}

	.u-page__tag-item {
		margin-top: 50rpx;
		display: flex;
		justify-content: space-around;
		text-align: center;

	}

	.stadiumBox {
		width: 80%;
		height: auto;
		border-radius: 16px;
		min-height: 80rpx;
		opacity: 1;
		background: #FFFFFF;
		box-shadow: 0px 8px 25px 0px rgba(83, 89, 144, 0.07);
		margin: 3% auto;
	}

	.image-container {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}

	.stadium-image {
		width: 100%;
		height: 150px;
		/* 图片高度 */
	}

	.info {
		padding: 10px;
		/* 内边距 */
	}

	.stadium-name {
		font-size: 20px;
		/* 场馆名称大小 */
		font-weight: bold;
		/* 加粗 */
	}

	.capacity {
		margin: 5px 0;
		/* 上下间距 */
		color: #999999;
		/* 容量文本颜色 */
		font-size: 14px;
		/* 字体大小 */
	}

	.capacity-item {
		margin: 0 5px;
		/* 项目间距 */
	}
	.distance {  
	  color: #9593A4; /* 距离文本颜色 */  
	  font-size: 14px; /* 字体大小 */  
	} 
</style>